<template>
    <div class="bottom">
        <el-row>
          <el-col :span="24"
            >
            <h3 style="color:#FFf">Visitors</h3>
            </el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div :class="['grid-content' ,'bg-purple-dark',{'hoverStyle':isStyle}]">
                <div @click="ToDetail" @mouseover="hoverStyle" @mouseout="changeStyle" class="visitors">
                   <span >今日访客</span>
                   <span>{{totalV}}</span>
                </div>
            </div>
            </el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <div class="visitors-All">
                 <div class="new"><span class="title">新访客</span><span class="num">{{newV}}</span></div>
                 <div class="old"><span class="title">老访客</span><span class="num">{{getOld}}</span></div>
                </div>
            </div>
            </el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <div class="visitorsWeek">
                   <span>总访客（周）</span>
                   <div class="right">
                    <span>1382</span>
                   <em>+27%</em>
                   </div>
                 
                </div>
            </div>
            </el-col
          >
        </el-row>
      </div>
</template>

<script>
export default {
  data() {
    return {
      totalV:300,
      newV:172,
      isStyle:false
    }
  },
  methods:{
    ToDetail(){
      this.$router.push({name:'Form'})
    },
    hoverStyle(){
      this.isStyle=true
    },
    changeStyle(){
      this.isStyle=false

    }
  },
  computed:{
    getOld(){
      return this.totalV-this.newV
    },
    
  }
}
</script>

<style lang="less" scoped>
  .bottom {
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: rgb(70, 78, 133);
        transition: all 1s;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
        height: 100px;
        border-radius: 20px;
        .visitors{
          display: flex;
          height: 100%;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
           span:first-child{
            font-size: 20px;
            color: rgb(182, 173, 173);
          }
          span:last-child{
            font-size: 30px;
            color: #Fff;
          }
          // &:
        }
        .visitors-All{
          height: 100%;
          padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
              font-size: 16px;
            color: rgb(182, 173, 173);
            }
            .num{
              font-size: 20px;
            color: rgb(182, 173, 173);
            }
         
          .new{
            display: flex;
            justify-content: space-between;
           span {
            color: rgb(20, 138, 218) !important;
           }
          }
          .old{
            display: flex;
            justify-content: space-between;
            span {
              color: green !important;
           }
          }
        }
        .visitorsWeek{
          padding: 20px;
          display: flex;
          height: 100%;
          align-items: center;
          justify-content: space-between;
          span{
            font-size: 20px;
            color: rgb(182, 173, 173);
          }
          .right{
            display: flex;
            align-items: center;
            color: #fff;
          span{
            font-size: 25px;
            color: #fff;
          }
            em{
              background: rgb(44, 165, 235);
              padding: 2px 1px 1px 1px;
              font-size: 12px;
              margin-left: 5px;
            }
          }
        }
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    }
    .hoverStyle{
      transform: scale(1.1);
      cursor: pointer;
      box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    }
</style>